﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑支付方式</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统功能</el-breadcrumb-item>
                <el-breadcrumb-item>编辑支付方式</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="基本信息" name="info">
                    <div class="tab-content">
                        <el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item prop="siteId" label="所属站点">
                                <el-select v-model="model.siteId" placeholder="请选择...">
                                    <el-option v-for="item in siteList"
                                               :key="item.id"
                                               :label="item.title"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="paymentId" label="支付平台">
                                <el-select v-model="model.paymentId" placeholder="请选择..." @@change="handlePaymentChange">
                                    <el-option v-for="item in paymentList"
                                               :key="item.id"
                                               :label="item.title"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="currPaymentType==2" prop="type" label="接口类型">
                                <el-select v-model="model.type" placeholder="请选择...">
                                    <el-option label="扫码支付" value="native"></el-option>
                                    <el-option label="公众号支付" value="jsapi"></el-option>
                                    <el-option label="H5支付" value="h5"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="currPaymentType==3" prop="type" label="接口类型">
                                <el-select v-model="model.type" placeholder="请选择...">
                                    <el-option label="电脑网站支付" value="pc"></el-option>
                                    <el-option label="手机网站支付" value="h5"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="title" label="支付名称">
                                <el-input v-model="model.title" placeholder="网站显示的标题，128字符内"></el-input>
                            </el-form-item>
                            <el-form-item prop="sortId" label="排序数字">
                                <el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
                            </el-form-item>
                            <el-form-item label="AppID" v-if="currPaymentType==2">
                                <el-input v-model="model.key1" placeholder="AppID(应用ID)"></el-input>
                            </el-form-item>
                            <el-form-item label="AppSecret" v-if="currPaymentType==2">
                                <el-input v-model="model.key2" placeholder="AppSecret(应用密钥)"></el-input>
                            </el-form-item>
                            <el-form-item label="商户号" v-if="currPaymentType==2">
                                <el-input v-model="model.key3" placeholder="微信支付的商户号"></el-input>
                            </el-form-item>
                            <el-form-item label="APIv3密钥" v-if="currPaymentType==2">
                                <el-input v-model="model.key4" placeholder="微信商户APIv3密钥"></el-input>
                            </el-form-item>
                            <el-form-item label="CA证书路径" v-if="currPaymentType==2">
                                <el-input v-model="model.key5" placeholder="根目录下的相对路径,如/cert/wechat.p12"></el-input>
                            </el-form-item>

                            <el-form-item label="支付宝AppID" v-if="currPaymentType==3">
                                <el-input v-model="model.key1" placeholder="支付宝开放平台APPID"></el-input>
                            </el-form-item>
                            <el-form-item label="支付宝公钥" v-if="currPaymentType==3">
                                <el-input type="textarea" :rows="3" v-model="model.key2" placeholder="普通公钥方式的支付宝公钥RSA2"></el-input>
                            </el-form-item>
                            <el-form-item label="应用私钥" v-if="currPaymentType==3">
                                <el-input type="textarea" :rows="3" v-model="model.key3" placeholder="支付宝开放平台开发助手生成的应用私钥"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm">确认保存</el-button>
                <el-button plain @@click="linkUrl('paymentlist')">返回上一页</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'info',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                currPaymentType: 0,//当前收款类型
                siteList: [],
                paymentList: [],
                model: {
                    id: 0,
                    siteId: null,
                    paymentId: null,
                    type: null,
                    title: null,
                    key1: null,
                    key2: null,
                    key3: null,
                    key4: null,
                    key5: null,
                    sortId: 99
                },
                rules: {
                    title: [
                        { required: true, message: '请输入支付方式名称', trigger: 'blur' }
                    ],
                    siteId: [
                        { required: true, message: '请选择所属站点', trigger: 'change' }
                    ],
                    paymentId: [
                        { required: true, message: '请选择平台接入商', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '请选择接口类型', trigger: 'change' }
                    ],
                    sortId: [
                        { required: true, message: '请输入排序数字', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    let id = GetQueryValue("id"); //获取ID

                    new Promise(resolve => {
                        //加载支付平台列表
                        AxiosAjax({
                            url: '/payment/view/0',
                            success: function (res) {
                                _this.paymentList = res.data
                                resolve('ok')
                            }
                        });
                    }).then(val => {
                        return new Promise(resolve => {
                            //加载站点列表
                            AxiosAjax({
                                url: '/site/view/0',
                                success: function (res) {
                                    _this.siteList = res.data
                                    resolve('ok')
                                }
                            })
                        });
                    }).then(val => {
                        return new Promise(resolve => {
                            if (id) {
                                AxiosAjax({
                                    url: '/site/payment/' + id,
                                    loading: true,
                                    success: function (res) {
                                        //赋值给model
                                        Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
                                        //赋值当前类型
                                        _this.handlePaymentChange(_this.model.paymentId, false);
                                        resolve('ok');
                                    }
                                });
                            } else {
                                resolve('ok')
                            }
                        });
                    })
                },
                submitForm: function () {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        //提交表单,Id大于0则修改，否则添加
                        if (_this.model.id > 0) {
                            AxiosAjax({
                                method: 'put',
                                url: '/site/payment/' + _this.model.id,
                                data: _this.model,
                                loading: true,
                                successMsg: '修改支付方式已成功',
                                success: function (res) {
                                    //可跳转加列表页
                                    _this.linkUrl('/setting/paymentlist');
                                }
                            });
                        } else {
                            AxiosAjax({
                                method: 'post',
                                url: '/site/payment',
                                data: _this.model,
                                loading: true,
                                successMsg: '新增支付方式已成功',
                                success: function (res) {
                                    //重置表单
                                    _this.$refs['editForm'].resetFields();
                                }
                            });
                        }
                    })
                },
                //跳转链接
                linkUrl: function (url) {
                    window.location.href = url;
                },
                //选择支付平台回调
                handlePaymentChange(id, check = true) {
                    let _this = this;
                    _this.paymentList.forEach(function (item, index) {
                        if (item.id == id) {
                            _this.currPaymentType = item.type
                        }
                    })
                    if (check) {
                        if (_this.currPaymentType == 0) {
                            _this.model.type = "cash";
                        } else if (_this.currPaymentType == 1) {
                            _this.model.type = "balance";
                        } else {
                            _this.model.type = null;
                        }
                    }
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>
